<template>
  <div>
    <SearchBar :option="searchProps" @search="handleSearch"/>
    <el-table :data="list" :loading="loading" class="mt20">
      <el-table-column label="名称" prop="plugName"></el-table-column>
      <el-table-column label="状态" prop="hasGateway">
        <template #default="{ row }">{{ row.isOnline == 1 ? '在线' : '离线' }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleOpenBindLocks(row)">绑定的锁</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <LockEdit ref="lockEditRef" :row="selectRow" />
    <BindLocksDw :visible="bindLocksVisible" :row="selectRow" @cancel="handleBindLocksCancel" />
  </div>
</template>
<script setup name="LockGateway">
import LockEdit from './lockEdit.vue'
import SearchBar from '../component/searchBar.vue'
import { useRouter } from 'vue-router'
import {getList as getGatewayList} from "@/api/device/lockGateway.js";
import BindLocksDw from "@/views/deviceManagement/lockGateway/BindLocksDw.vue";

const { proxy } = getCurrentInstance()
const router = useRouter()

const loading = ref(false)
const bindLocksVisible = ref(false)
const total = ref(0)
const list = ref([])
const row = ref({})
const selectRow = ref({})
const searchProps = ref({
  group: false,
  smartLockType: false,
  searchStr: {
    show: true,
    key: 'lockAlias',
    placeholder: '请输入网关名称'
  }
})
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  }
})
const { queryParams } = toRefs(data)

/* 搜索 */
function handleSearch(params) {
  queryParams.value = { ...queryParams.value, ...params }
  console.log(queryParams.value)
  getList()
}

/* 详情页 */
function handleOpenBindLocks(row) {
  selectRow.value = row
  bindLocksVisible.value = true
}

function handleBindLocksCancel() {
  selectRow.value = {}
  bindLocksVisible.value = false
}

function getList() {
  list.value = []
  loading.value = true
  getGatewayList(queryParams.value).then((res) => {
    console.log(res)
    if (res.code === 200) {
      list.value = res.rows.map(it => {
        try {
          it.lockInfoObj = JSON.parse(it.lockInfo)
        } catch (e) {
          it.lockInfoObj = {}
        }
        return it
      })
      total.value = res.total
      loading.value = false
    }
  })
}
getList()
</script>
